<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
let username = ref("")
let password = ref("")
const login = () => {
  if(username.value==""){
    ElMessage("请输入用户名")
  }else if(password.value==""){
    ElMessage("请输入密码")
  }else{
    fetch("http://127.0.0.1:8080/user/login", {
      method: "POST",
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({name:username.value, pwd:password.value}).toString()
    })
    .then(response => response.json())
    .then(json => {
         if(json.code==202){
           ElMessage("登录成功")
           sessionStorage.setItem("user", username.value)
           location.href = "/"
         }else{
           ElMessage(json.msg)
         }
    })
    .catch(error => console.error('Error:', error));
  }
} 
const register = () => {
  ElMessage("尚未发布注册功能")}
</script>  

<template>
   <!-- login form -->
    <div class="login-form"> 
        <div style="margin-bottom: 10px;">
            <el-input v-model="username" placeholder="请输入用户名"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
            <el-input v-model="password" placeholder="请输入密码" type="password"></el-input>
        </div>
        <el-button  type="primary" @click="login">登录</el-button>
        <el-button type="text" @click="register">注册</el-button>
    </div>
</template>
<style scoped>
.login-form {
  max-width: 200px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #eeeeee;
  border-radius: 5px;
}

</style>